<template>
  <div id="components-dropdown-demo-placement">
    <template v-for="(placement, index) in placements" >
      <CloudDropdown :placement="placement" :key="index">
        <CloudButton>{{ placement }}</CloudButton>
        <CloudMenu slot="overlay">
          <CloudMenuItem>
            <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/"
              >1st menu item</a
            >
          </CloudMenuItem>
          <CloudMenuItem>
            <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/"
              >2nd menu item</a
            >
          </CloudMenuItem>
          <CloudMenuItem>
            <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/"
              >3rd menu item</a
            >
          </CloudMenuItem>
        </CloudMenu>
      </CloudDropdown>
      <br v-if="index === 2" />
    </template>
  </div>
</template>

<script>
export default {
  title: '4.弹出位置',
  data() {
    return {
      placements: ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'],
    };
  },
};
</script>
<style>
#components-dropdown-demo-placement .ant-btn {
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>